<template>
  <svg-icon color="#5a5e66" size="20" :name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="handleClick" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import screenfull from 'screenfull'

const isFullscreen = ref(false)

onMounted(() => { init() })
onBeforeUnmount(() => {
  if (screenfull.isEnabled) {
    screenfull.off('change', change)
  }
})
// 初始化
function init() {
  if (screenfull.isEnabled) {
    // 设置监听器
    screenfull.on('change', change)
  }
}

function change() {
  isFullscreen.value = screenfull.isFullscreen
}

// 点击
function handleClick() {
  if (!screenfull.isEnabled) {
    return false
  }
  screenfull.toggle()
}
</script>

<style lang="scss" scoped>
.fullscreen {
  display: inline-block;
  cursor: pointer;
  // vertical-align: 10px;
}</style>